<template>
  <div class="panel">
    <brokenLine :lineType="lineType"></brokenLine>
    <el-row :gutter="20">
      <el-col :span="14" class="relative">
        <el-form
          class="head mt10 pt10"
          ref="warrantManRankForm"
          :model="warrantManRankForm"
          label-width="40px"
          style="width: 80%;"
          v-if="showWarrantWF"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="9">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="warrantManRankForm.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleWarrantManRank"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="类型">
                <el-select
                  v-model="warrantManRankForm.type"
                  placeholder="筛选类型"
                  @change="handleWarrantManRank"
                >
                  <el-option label="接单" value="ordertaking"></el-option>
                  <el-option label="审过" value="pass"></el-option>
                  <el-option label="提车" value="pickCar"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchWarrantWF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div class="grid-content-center bg-purple pt20 pl15" id="warrantMan-rank"></div>
      </el-col>
      <funnel
        :funnelItem="funnelItem"
        :funnelTitle="funnelTitle"
        :trialList="trialList"
        :warrantManList="warrantManList"
      ></funnel>
    </el-row>
    <pie :pieType="pieType"></pie>
  </div>
</template>

<script>
import { option19, pickerOptions2 } from "@/../config/Stats_options";
import { getMonthStartDate, getMonthEndDate } from "@/utils/getCurrMonth";
import pie from "@/components/pie";
import brokenLine from "@/components/brokenLine";
import funnel from "@/components/funnel";

export default {
  name: "statistics",
  data() {
    return {
      warrantManRankForm: {
        time: [getMonthStartDate(), getMonthEndDate()],
        type: "ordertaking"
      },
      pieType: ["notPass", "trial"],
      lineType: ["pass", "passSum", "WOrdertaking", "pickCarW"],
      funnelTitle: "转化",
      pickerOptions2,
      trialList: [],
      showWarrantWF: false,
      warrantManList: [],
      funnelItem: [
        { value: 0, name: "接单数量" },
        { value: 0, name: "审过数量" },
        { value: 0, name: "放款数量" },
        { value: 0, name: "提车数量" }
      ]
    };
  },
  mounted() {
    this.handleWarrantManRank();
    this.getTrialList();
    this.getWarrantManList();
  },
  methods: {
    handleSwitchWarrantWF() {
      this.showWarrantWF = !this.showWarrantWF;
    },
    getWarrantManList() {
      this.$axios.get("/api/system/warrantMans").then(data => {
        this.warrantManList = data.map(item => {
          return item.name;
        });
      });
    },
    getTrialList() {
      this.$axios.get("/api/system/trials").then(data => {
        this.trialList = data.map(item => {
          return item.name;
        });
      });
    },
    handleWarrantManRank() {
      option19.yAxis.data = [];
      option19.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_warrantManRank", {
          from: this.warrantManRankForm.time[0],
          to: this.warrantManRankForm.time[1],
          type: this.warrantManRankForm.type
        })
        .then(data => {
          option19.yAxis.data = data.warrantMan;
          option19.series[0].data = data.amount;
          option19.series[0].name = data.name;
        })
        .then(() => {
          this.updateWarrantManRank();
        });
    },
    updateWarrantManRank() {
      let warrantManRank = this.$echarts.init(
        document.getElementById("warrantMan-rank")
      );
      warrantManRank.setOption(option19, true);
    }
  },
  components: {
    pie,
    brokenLine,
    funnel
  }
};
</script>
<style>
</style>